<template>
  <div class="toolbar-bottom">
    <div class="toolbar-b-1">经度:{{ lonlat.longitude }}</div>
    <span class="Vertical"> </span>
    <div class="toolbar-b-2">纬度:{{ lonlat.latitude }}</div>
    <span class="Vertical"> </span>
    <div class="toolbar-b-3">海拔:{{ lonlat.height }}</div>
    <span class="Vertical"> </span>
    <div class="toolbar-b-4">层级:{{ lonlat.level }}</div>
    <!-- <span> </span> -->
    <!-- <div class="toolbar-b-five" :style="{ width: distanceWidth }">
      <div class="toolbar-b-five-1">{{ distanceLabel }}</div>
      <div class="toolbar-b-five-2"></div>
    </div> -->
  </div>
</template>
<script setup lang="ts">
import { round } from 'lodash';
// const distanceLabel = ref<string>('');
// const distanceWidth = ref<string>('100%');

const lonlat = ref<any>({
  longitude: 113.9358,
  latitude: 30.0856,
  height: '10000km',
  level: 0,
});

const { cimInstance } = window;
//获取经纬度
cimInstance.eventApi.addEventListener('camera_change', function () {
  // const scaleObj = cimInstance.api.getSceneScale();
  // if (scaleObj) {
  //   distanceLabel.value = scaleObj.distanceLabel;
  //   distanceWidth.value = scaleObj.barWidth + 'px';
  // }
  const cameraParam = cimInstance.api.getCameraParameter();
  lonlat.value.longitude = round(cameraParam.longitude, 4);
  lonlat.value.latitude = round(cameraParam.latitude, 4);
  // lonlat.value.height = round(cameraParam.height, 4);
  lonlat.value.height =
    cameraParam.height < 1000
      ? `${round(cameraParam.height)}m`
      : `${round(cameraParam.height / 1000)}km`;
  lonlat.value.level = cimInstance.api.getLevel();
});
</script>

<style lang="less" scoped>
.toolbar-bottom {
  width: 490px;
  height: 30px;
  background: #2e2e2e;
  border-radius: 4px;
  opacity: 0.86;
  position: absolute;
  bottom: 35px;
  left: 715px;
  display: flex;
  color: white;
  align-items: center;
  justify-content: space-around;
  font-size: 10px;
  color: #e8e8e8;
  .Vertical {
    width: 1px;
    height: 16px;
    background: #585858;
    border-radius: 1px;
  }
  div {
    display: flex;
    justify-content: space-around;
  }

  .toolbar-b-1 {
    width: 27.5%;
  }

  .toolbar-b-2 {
    width: 27.5%;
  }

  .toolbar-b-3 {
    width: 15%;
  }

  .toolbar-b-4 {
    width: 15%;
  }

  // .toolbar-b-five {
  //   width: 15%;
  //   display: flex;
  //   flex-direction: column;
  //   align-items: center;
  //   justify-content: center;
  // }
  // .toolbar-b-five-1 {
  //   height: 66%;
  //   justify-content: bottom;
  // }
  // .toolbar-b-five-2 {
  //   width: 90%;
  //   height: 5px;
  //   border: 1px solid rgb(184, 171, 171);
  //   border-top: none;
  // }
}
</style>
